<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易云音乐</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
 
</head>

<body>
  
 <div class="other">
<!-- 头部 -->
<header>
  <div class="wrap clearfix">
    <ul class="left">
      <li>
        <a href="#">
          <img src="./favicon.ico" alt=""> 网易云音乐
        </a>
      </li>
      <li><a href="#">
          <span>发现音乐</span>
        </a></li>
      <li><a href="#">
          <span>我的音乐</span>
        </a></li>
      <li><a href="#">
          <span>关注</span>
        </a></li>
      <li><a href="#">
          <span>商城</span>
        </a></li>
      <li><a href="#">
          <span>音乐人</span>
        </a></li>
      <li><a href="#">
          <span>云推歌</span>
        </a></li>
      <li><a href="#">
          <span>下载客户端</span>
        </a></li>

    </ul>
    <div class="right">
      <!-- 搜索框制作 -->
      <div class="search">
        <input type="text" placeholder="音乐.电台.视频.用户">
        <div class="logo"></div>
      </div>
      <!-- 创作者中心制作 -->
      <div class="create">
        <a href="#">创作者中心</a>
      </div>
      <!-- 登录制作 -->
      <div class="denglu">
        <a href="#">登录</a>
      </div>
    </div>
  </div>
  <!-- 上方导航栏制作 -->
  <div class="hd clearfix">
    <ul class="nav1">
      <a href="#" class="red">推荐</a>
      <a href="#">排行版</a>
      <a href="gd.html" target="_blank">歌单</a>
      <a href="#">播客有声书</a>
      <a href="gs.html">歌手</a>
      <a href="xd.html">新碟上架</a>
    </ul>
  </div>
</header>
<!-- 大图片制作 -->
<div class="bd-images">
  <!-- 中间部分制作 -->
  <div class="center">
    <div class="left-img"><img src="./upload/big.png" class="bigimg" alt="">
      <!-- 小圆角制作 -->
      <div class="yuan">
        <ul class="">
          <a href="#">
            <li class="xiaored" data-id="1"></li>
          </a>
          <a href="#">
            <li data-id="2"></li>
          </a>
          <a href="#">
            <li data-id="3"></li>
          </a>
          <a href="#">
            <li data-id="4"></li>
          </a>
          <a href="#">
            <li data-id="5"></li>
          </a>
          <a href="#">
            <li data-id="6"></li>
          </a>
          <a href="#">
            <li data-id="7"></li>
          </a>
          <a href="#">
            <li data-id="8"></li>
          </a>
          <a href="#">
            <li data-id="9"></li>
          </a>

        </ul>
      </div>
    </div>
    <div class="right-img">
      <a href="#"></a>
      <p> PC 安卓 iphone WP IPad Mac 六大客户端</p>
    </div>
  </div>
  <!-- 左右箭头制作 -->
  <div class="left-arrow">
    <a href="#"></a>
  </div>
  <div class="right-arrow">
    <a href="#"></a>
  </div>

</div>
<!-- 主体部分制作 -->
<div class="zhuti">
  <div class="w">
    <div class="zt">
      <!-- 左边 -->
      <div class="zhuti-left">
        <div class="left1">
          <div class="left1-hd">
            <a href="#">热门推荐</a>
            <a href="#">华语</a>
            <a href="#">流行</a>
            <a href="#">摇滚</a>
            <a href="#">民谣</a>
            <a href="#">电子</a>
            <a href="#">更多
              <div class="arrow"></div>
            </a>

          </div>
          <div class="left1-bd">
            <a href="">
              <div class="top">
                <img src="./images/z1.jpg" alt="">
                <div class="bgcbox">
                  <audio src="./upload/ww.mp3" class="ww"></audio>
                  <div class="ear"></div>
                  <div class="nb">4003万</div>
                  <div class="bofang"></div>
                </div>
              </div>
              <p>武侠影视金曲100首 每个人心中的江湖梦</p>
            </a>
            <a href="#">
              <div class="top">
                <img src="./images/z1.jpg" alt="">
                <div class="bgcbox">
                  <div class="ear"></div>
                  <div class="nb">4003万</div>
                  <div class="bofang"></div>
                </div>
              </div>
              <p>武侠影视金曲100首 每个人心中的江湖梦</p>
            </a>
            <a href="#">
              <div class="top">
                <img src="./images/z1.jpg" alt="">
                <div class="bgcbox">
                  <div class="ear"></div>
                  <div class="nb">4003万</div>
                  <div class="bofang"></div>
                </div>
              </div>
              <p>武侠影视金曲100首 每个人心中的江湖梦</p>
            </a>

            <a href="#">
              <div class="top">
                <img src="./images/z1.jpg" alt="">
                <div class="bgcbox">
                  <div class="ear"></div>
                  <div class="nb">4003万</div>
                  <div class="bofang"></div>
                </div>
              </div>
              <p>武侠影视金曲100首 每个人心中的江湖梦</p>
            </a>
            <a href="#">
              <div class="top">
                <img src="./images/z1.jpg" alt="">
                <div class="bgcbox">
                  <div class="ear"></div>
                  <div class="nb">4003万</div>
                  <div class="bofang"></div>
                </div>
              </div>
              <p>武侠影视金曲100首 每个人心中的江湖梦</p>
            </a>
            <a href="#">
              <div class="top">
                <img src="./images/z1.jpg" alt="">
                <div class="bgcbox">
                  <div class="ear"></div>
                  <div class="nb">4003万</div>
                  <div class="bofang"></div>
                </div>
              </div>
              <p>武侠影视金曲100首 每个人心中的江湖梦</p>
            </a>
            <a href="#">
              <div class="top">
                <img src="./images/z1.jpg" alt="">
                <div class="bgcbox">
                  <div class="ear"></div>
                  <div class="nb">4003万</div>
                  <div class="bofang"></div>
                </div>
              </div>
              <p>武侠影视金曲100首 每个人心中的江湖梦</p>
            </a>
            <a href="#">
              <div class="top">
                <img src="./images/z1.jpg" alt="">
                <div class="bgcbox">
                  <div class="ear"></div>
                  <div class="nb">4003万</div>
                  <div class="bofang"></div>
                </div>
              </div>
              <p>武侠影视金曲100首 每个人心中的江湖梦</p>
            </a>
          </div>
        </div>
        <!-- 第二个 -->
        <div class=" left2 left1">
          <div class="left1-hd">
            <a href="#">新碟上架</a>
            <a href="#">更多
              <div class="arrow"></div>
            </a>
          </div>
          <div class="left2-bd">
            <div class="by">
              <a href="#"><img src="./images/109951170600632372.jpg" alt="">
                <h6>乐天人生</h6>
                <p>马思唯 </p>
              </a>
              <a href="#"><img src="./images/109951170600632372.jpg" alt="">
                <h6>乐天人生</h6>
                <p>马思唯 </p>
              </a>
              <a href="#"><img src="./images/109951170600632372.jpg" alt="">
                <h6>乐天人生</h6>
                <p>马思唯 </p>
              </a>
              <a href="#"><img src="./images/109951170600632372.jpg" alt="">
                <h6>乐天人生</h6>
                <p>马思唯 </p>
              </a>
              <a href="#"><img src="./images/109951170600632372.jpg" alt="">
                <h6>乐天人生</h6>
                <p>马思唯 </p>
              </a>

            </div>
            <!-- 左右箭头 -->
            <div class="arr1"></div>
            <div class="arr2"></div>
          </div>
        </div>
        <!-- 第三个 -->
        <div class=" left3 left1">
          <div class="left1-hd">
            <a href="#">榜单</a>
            <a href="#">更多
              <div class="arrow"></div>
            </a>
          </div>
          <div class="left3-bd">
            <div class="top">
              <div class="t">
                <a href="#"><img src="./upload/929.jpg" alt="">
                  <h3>飙升榜</h3>
                  <div class="icon1"></div>
                  <div class="icon2"></div>
                </a>
              </div>
              <div class="t">
                <a href="#"><img src="./upload/929.jpg" alt="">
                  <h3>飙升榜</h3>
                  <div class="icon1"></div>
                  <div class="icon2"></div>
                </a>
              </div>
              <div class="t">
                <a href="#"><img src="./upload/929.jpg" alt="">
                  <h3>飙升榜</h3>
                  <div class="icon1"></div>
                  <div class="icon2"></div>
                </a>
              </div>
            </div>
            <ul class="paihangbang">
              <li><a href="#">
                  <div class="num">1</div>
                  <div class="name">散场</div>
                </a></li>
              <li><a href="#">
                  <div class="num">2</div>
                  <div class="name">我愿</div>
                </a></li>
              <li><a href="#">
                  <div class="num">3</div>
                  <div class="name">又是艳阳天</div>
                </a></li>
              <li><a href="#">
                  <div class="num">4</div>
                  <div class="name">两难</div>
                </a></li>
              <li><a href="#">
                  <div class="num">5</div>
                  <div class="name">冰棍</div>
                </a></li>
              <li><a href="#">
                  <div class="num">6</div>
                  <div class="name">april encoment</div>
                </a></li>
              <li><a href="#">
                  <div class="num">7</div>
                  <div class="name">colorworld</div>
                </a></li>
              <li><a href="#">
                  <div class="num">8</div>
                  <div class="name">Vigo</div>
                </a></li>
              <li><a href="#">
                  <div class="num">9</div>
                  <div class="name">去他们的世界</div>
                </a></li>
              <li><a href="#">
                  <div class="num">10</div>
                  <div class="name">冲动</div>
                </a></li>
              <li><a href="#">
                  <div class="num"></div>
                  <div class="name">查看全部></div>
                </a></li>
            </ul>
            <ul class="paihangbang">
              <li><a href="#">
                  <div class="num">1</div>
                  <div class="name">散场</div>
                </a></li>
              <li><a href="#">
                  <div class="num">2</div>
                  <div class="name">我愿</div>
                </a></li>
              <li><a href="#">
                  <div class="num">3</div>
                  <div class="name">又是艳阳天</div>
                </a></li>
              <li><a href="#">
                  <div class="num">4</div>
                  <div class="name">两难</div>
                </a></li>
              <li><a href="#">
                  <div class="num">5</div>
                  <div class="name">冰棍</div>
                </a></li>
              <li><a href="#">
                  <div class="num">6</div>
                  <div class="name">april encoment</div>
                </a></li>
              <li><a href="#">
                  <div class="num">7</div>
                  <div class="name">colorworld</div>
                </a></li>
              <li><a href="#">
                  <div class="num">8</div>
                  <div class="name">Vigo</div>
                </a></li>
              <li><a href="#">
                  <div class="num">9</div>
                  <div class="name">去他们的世界</div>
                </a></li>
              <li><a href="#">
                  <div class="num">10</div>
                  <div class="name">冲动</div>
                </a></li>
              <li><a href="#">
                  <div class="num"></div>
                  <div class="name">查看全部></div>
                </a></li>
            </ul>
            <ul class="paihangbang">
              <li><a href="#">
                  <div class="num">1</div>
                  <div class="name">散场</div>
                </a></li>
              <li><a href="#">
                  <div class="num">2</div>
                  <div class="name">我愿</div>
                </a></li>
              <li><a href="#">
                  <div class="num">3</div>
                  <div class="name">又是艳阳天</div>
                </a></li>
              <li><a href="#">
                  <div class="num">4</div>
                  <div class="name">两难</div>
                </a></li>
              <li><a href="#">
                  <div class="num">5</div>
                  <div class="name">冰棍</div>
                </a></li>
              <li><a href="#">
                  <div class="num">6</div>
                  <div class="name">april encoment</div>
                </a></li>
              <li><a href="#">
                  <div class="num">7</div>
                  <div class="name">colorworld</div>
                </a></li>
              <li><a href="#">
                  <div class="num">8</div>
                  <div class="name">Vigo</div>
                </a></li>
              <li><a href="#">
                  <div class="num">9</div>
                  <div class="name">去他们的世界</div>
                </a></li>
              <li><a href="#">
                  <div class="num">10</div>
                  <div class="name">冲动</div>
                </a></li>
              <li><a href="#">
                  <div class="num"></div>
                  <div class="name">查看全部></div>
                </a></li>
            </ul>
          </div>
        </div>

      </div>
      <!-- 右边 -->
      <div class="zhuti-right">
        <div class="vip"><a href="#"><img src="./upload/dis_vip_card.png" alt=""></a></div>
        <div class="jieshao">
          <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
        </div>
        <div class="button"><span class="yhdl">用户登录

          </span></div>
        <div class="geshou">
          <div class="geshou-hd clearfix">
            <h4>入驻歌手</h4>
            <a href="#">查看全部
            </a>
          </div>
          <div class="geshou-bd">
            <div class="ds">
              <img src="./images/gs.jpg" alt="">
              <h3>张惠妹AMEl</h3>
              <p>台湾歌手张惠妹</p>
            </div>
            <div class="ds">
              <img src="./images/gs.jpg" alt="">
              <h3>张惠妹AMEl</h3>
              <p>台湾歌手张惠妹</p>
            </div>
            <div class="ds">
              <img src="./images/gs.jpg" alt="">
              <h3>张惠妹AMEl</h3>
              <p>台湾歌手张惠妹</p>
            </div>
            <div class="ds">
              <img src="./images/gs.jpg" alt="">
              <h3>张惠妹AMEl</h3>
              <p>台湾歌手张惠妹</p>
            </div>
            <div class="ds">
              <img src="./images/gs.jpg" alt="">
              <h3>张惠妹AMEl</h3>
              <p>台湾歌手张惠妹</p>
            </div>
            <div class="sq">申请成为网易音乐人</div>
          </div>
        </div>
        <div class="geshou">
          <div class="geshou-hd clearfix">
            <h4>入驻歌手</h4>
            <a href="#">查看全部
            </a>
          </div>
          <div class="geshou-bd">
            <div class="ds">
              <img src="./images/gs.jpg" alt="">
              <h3>张惠妹AMEl</h3>
              <p>台湾歌手张惠妹</p>
            </div>
            <div class="ds">
              <img src="./images/gs.jpg" alt="">
              <h3>张惠妹AMEl</h3>
              <p>台湾歌手张惠妹</p>
            </div>
            <div class="ds">
              <img src="./images/gs.jpg" alt="">
              <h3>张惠妹AMEl</h3>
              <p>台湾歌手张惠妹</p>
            </div>
            <div class="ds">
              <img src="./images/gs.jpg" alt="">
              <h3>张惠妹AMEl</h3>
              <p>台湾歌手张惠妹</p>
            </div>
            <div class="ds">
              <img src="./images/gs.jpg" alt="">
              <h3>张惠妹AMEl</h3>
              <p>台湾歌手张惠妹</p>
            </div>
            <div class="sq">申请成为网易音乐人</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 底部制作 -->
<footer>
  <div class="w">
    <div class="enter clearfix">
      <ul>
        <li>
          <a href="#"></a>
          <p>音乐开放平台</p>
        </li>
        <li>
          <a href="#"></a>
          <p>音乐开放平台</p>
        </li>
        <li>
          <a href="#"></a>
          <p>音乐开放平台</p>
        </li>
        <li>
          <a href="#"></a>
          <p>音乐开放平台</p>
        </li>
        <li>
          <a href="#"></a>
          <p>音乐开放平台</p>
        </li>
        <li>
          <a href="#"></a>
          <p>音乐开放平台</p>
        </li>
        <li>
          <a href="#"></a>
          <p>音乐开放平台</p>
        </li>
      </ul>
    </div>
    <div class="copy">
      <div class="d1 clearfix">
        <a href="#">服务条款</a>
        <p>|</p>
        <a href="#">隐私政策</a>
        <p>|</p>
        <a href="#">儿童隐私政策</a>
        <p>|</p>
        <a href="#">版权投诉</a>
        <p>|</p>
        <a href="#">投资者关系</a>
        <p>|</p>
        <a href="#">广告合作</a>
        <p>|</p>
        <a href="#">联系我们</a>
      </div>
      <div class="d2 clearfix">
        <a href="#">廉政举报</a>
        <p>不良信息举报邮箱 51jubao@sevice.netease.com</p>
        <p>客服热线:95163298</p>
      </div>
      <div class="d3">
        互联网宗教信息服务许可证：浙(2022)0000120 增值电信业务经营许可证:浙B2-20150198 粤B2-20090191-18 浙ICP备15006616号-4 工业和信息化部备案管理系统网站
      </div>
      <div class="d4">网易公司版权所有©1997-2025杭州乐读科技有限公司运营:浙网文[2024] 0900-042号 浙公网安备 33010802013307号 算法服务公示信息</div>
    </div>
  </div>
</footer>
<!-- 电梯导航栏 -->
<div class="top-fh"><a href="#" class="fh">^&nbsp top</a></div>
 </div>

 <!-- 登录页面制作 -->
    <div class="yd">
      <div class="yd-hd">手机号登录<span class="gb"></span></div>
      <div class="yd-bd">
             <div class="sj">+86 | <input type="text" placeholder="请输入手机号"></div>
            <div class="yz"><input type="text" placeholder="请输入短信验证码">
            <a href="#" class="yzm">获取验证码</a>
             <a href="#" class="zhgl">登录</a>
             <a href="#" class="mm">密码登录</a>
               </div>
      
    </div>
    <div class="yd-ft"> < 其他登录方式 </div>
<!-- </div> -->
</div>


     <script src="./js/common.js"></script>
     <script src="./js/index.js"></script>
</body>

</html>
